<template>
	<view class="container">
		<view class="header-status"></view>
		<view class="header">
			<view class="header-top">
				<text>管理</text>
			</view>
			<view class="header-bottom">
				<view class="header-bottom-left">
					<image src="../../static/users/shangchao.jpg"></image>
				</view>
				<view class="header-bottom-right">
					<view class="header_num">
						<text>0000 0000 0000 0000</text>
						<cmd-icon type="user" class="chevron-right" color="#FF6E6F"></cmd-icon>
					</view>
					<view class="header-type">
						<view class="sketch">
							<cmd-icon type="sketch" class="chevron-right" color="#EEC999"></cmd-icon>
							<text>钻石会员</text>
						</view>
						<view class="renew">
							<text>续费</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="users">
			<view class="users-top">
				<view class="users-top-left">
					<cmd-icon type="sketch" class="chevron-right" color="#EEC999"></cmd-icon>
					<text>会员权益</text>
				</view>
				<view class="users-top-right">
					<cmd-icon type="add-circle" class="chevron-right" color="#EEC999"></cmd-icon>
				</view>
			</view>
			<view class="users-bottem">
				<view class="users-bottem-left">
					<image src="../../static/users/shangchao.jpg"></image>
					<text>商超优惠买单</text>
				</view>
				<view class="users-bottem-right">
					<image src="../../static/users/youhuiquan.jpg"></image>
					<text class="users-bottem-title">特权券</text>
					<text class="users-bottem-num">(24)</text>
				</view>
			</view>
		</view>
		<view class="money">
			<view class="money-top">
				<text>我的钱包</text>
				<cmd-icon type="chevron-right" class="chevron-right" color="#E5E5E5"></cmd-icon>
			</view>
			<view class="money-bottom">
				<view>
					<text class="moneys">100.00</text>
					<text class="money-title">待入账 (元)</text>
				</view>
				<view>
					<text class="moneys">100.00</text>
					<text class="money-title">余额 (元)</text>
				</view>
				<view>
					<text class="moneys">100.00</text>
					<text class="money-title">总节省 (元)</text>
				</view>
			</view>
		</view>
		<view class="order">
			<view class="order-top">
				<text>我的订单</text>
				<cmd-icon type="chevron-right" class="chevron-right" color="#E5E5E5"></cmd-icon>
			</view>
			<view class="order-bottom">
				<view class="order-bottom-one">
					<image src="../../static/users/daizhifu.jpg" class="order-img"></image>
					<text>待付款</text>
				</view>
				<view class="order-bottom-two">
					<image src="../../static/users/chulizhong.jpg" class="order-img"></image>
					<text>处理中</text>
				</view>
				<view class="order-bottom-three">
					<image src="../../static/users/wancheng.jpg" class="order-img"></image>
					<text>已完成</text>
				</view>
				<view class="order-bottom-four">
					<image src="../../static/users/shouhou.jpg" class="order-img"></image>
					<text>退款/售后</text>
				</view>
			</view>
		</view>
		<view class="setting">
			<view class="setting-one setting-box">
				<view class="setting-left">
					<cmd-icon type="calendar" class="settings" color="#CAD4D3"></cmd-icon>
					<text class="titles">授权管理</text>
				</view>
				<view class="setting-right ">
					<cmd-icon type="chevron-right" class="chevron-right" color="#E5E5E5"></cmd-icon>
				</view>
			</view>
			<view class="setting-two setting-box">
				<view class="setting-left">
					<cmd-icon type="numbered-list" class="settings" color="#CAD4D3"></cmd-icon>
					<text class="titles">商务合作</text>
				</view>
				<view class="setting-right">
					<text class="league">欢迎优质品牌权益入驻</text>
					<cmd-icon type="chevron-right" class="chevron-right" color="#E5E5E5"></cmd-icon>
				</view>
			</view>
			<view class="setting-three setting-box">
				<view class="setting-left">
					<cmd-icon type="mail" class="settings" color="#CAD4D3"></cmd-icon>
					<text class="titles">联系客服</text>
				</view>
				<view class="setting-right">
					<cmd-icon type="chevron-right" class="chevron-right" color="#E5E5E5"></cmd-icon>
				</view>
			</view>
			<view class="setting-rour setting-box">
				<view class="setting-left">
					<cmd-icon type="settings" class="settings" color="#CAD4D3"></cmd-icon>
					<text class="titles">设置{{mobile}}</text>
				</view>
				<view class="setting-right">
					<cmd-icon type="chevron-right" class="chevron-right" color="#E5E5E5"></cmd-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import cmdIcon from "@/components/cmd-icon/cmd-icon.vue";
	export default {
		data() {
			
				mobile:''
			
		},
		components: {
			cmdIcon: cmdIcon
		},
		onLoad() {
		    setTimeout(function () {
		        console.log('start pulldown');
		    }, 1000);
		    //uni.startPullDownRefresh();
		    uni.startPullDownRefresh();  //这里表示当进入页面的时候就开始执行下拉刷新动画
		},
		onPullDownRefresh() {
		    //监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
		    console.log('refresh');
			setTimeout(function () {
			    console.log('才刚');
			}, 1000);
		     uni.stopPullDownRefresh();  //停止下拉刷新动画
		}
		
	}
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		background-color: #F7F6F9;
	}

	.header-status {
		height: var(--status-bar-height);
	}

	.header {
		height: 225rpx;
	}

	.header-top {
		display: flex;
		flex-direction: row-reverse;
		margin: 30rpx 30rpx 0 0;
		font-size: 32rpx;
		color: #1C1C1C;
		font-weight: 500;
	}

	.header-bottom {
		margin: 30rpx 0 0 30rpx;
		display: flex;
		flex-direction: row;
	}

	.header-bottom-left image {
		width: 130rpx;
		height: 130rpx;
		border-radius: 65rpx;
	}

	.header-bottom-right {
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
	}

	.header_num {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-top: 25rpx;
		font-size: 36rpx;
		color: #1C1C1C;
		font-weight: 500;
	}

	.header_num .chevron-right {
		font-size: 28rpx !important;
		margin-left: 10rpx;
	}

	.header-type {
		margin-top: 20rpx;
		display: flex;
		flex-direction: row;

		align-items: center;

	}

	.sketch {
		width: 180rpx;
		height: 44rpx;
		background: linear-gradient(90deg, #000000 0%, #6A6A6A 100%);
		border-radius: 22rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.sketch text {
		color: #EEC999;
		font-size: 26rpx;
		margin-left: 10rpx;
	}

	.sketch .chevron-right {
		font-size: 30rpx !important;
	}

	.renew {
		width: 70rpx;
		height: 30rpx;
		border: 1rpx solid #FF3536;
		border-radius: 15rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		color: #FF3536;
		font-size: 24rpx;
		margin-left: 20rpx;
	}

	.users {
		margin: 50rpx 30rpx 0 30rpx;
		height: 222rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.users-top {
		width: 640rpx;
		height: 70rpx;
		background: #000000;
		border-radius: 12rpx 12rpx 0px 0px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.users-top-left .chevron-right {
		font-size: 32rpx !important;
		margin-left: 25rpx;
	}

	.users-top-right .chevron-right {
		font-size: 32rpx !important;
		margin-right: 25rpx;
	}

	.users-top-left text {
		margin-left: 10rpx;
		font-size: 28rpx;
		color: #EEC999;
	}

	.users-bottem {
		width: 690rpx;
		height: 152rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.users-bottem-left {
		margin-left: 40rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.users-bottem-left text {
		font-size: 32rpx;
		color: #1C1C1C;
		font-weight: bold;
		margin-left: 10rpx;
	}

	.users-bottem-left image {
		width: 60rpx;
		height: 60rpx;
	}

	.users-bottem-right image {
		width: 70rpx;
		height: 70rpx;
	}

	.users-bottem-right {
		margin-left: 50rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.users-bottem-title {
		font-size: 32rpx;
		color: #1C1C1C;
		font-weight: bold;
		margin-left: 10rpx;
	}

	.users-bottem-num {
		font-size: 24rpx;
		color: #FF3536;
		margin-left: 10rpx;
	}

	.money {
		margin: 30rpx 30rpx 0 30rpx;
		height: 233rpx;
		border-radius: 12rpx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
	}

	.money-top {
		height: 85rpx;
		border-bottom: 1rpx #F4F4F4 solid;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.money-top text {
		margin-left: 30rpx;
		font-size: 32rpx;
		color: #1C1C1C;
	}

	.money-top .chevron-right {
		font-size: 32rpx !important;
		margin-right: 30rpx;
	}

	.money-bottom {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin: 40rpx 40rpx 0 40rpx;
	}

	.money-bottom view {
		width: 140rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.moneys {
		font-size: 24rpx;
		font-weight: bold;
		color: #1C1C1C;
	}

	.money-title {
		margin-top: 20rpx;
		font-size: 24rpx;
		color: #969696;
	}

	.order {
		height: 273rpx;
		border-radius: 12rpx;
		margin: 30rpx 30rpx 0 30rpx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;

	}

	.order-top {
		height: 85rpx;
		border-bottom: 1rpx #F4F4F4 solid;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.order-top text {
		margin-left: 30rpx;
		font-size: 32rpx;
		color: #1C1C1C;
	}

	.order-top .chevron-right {
		font-size: 32rpx !important;
		margin-right: 30rpx;
	}

	.order-bottom {
		display: flex;
		justify-content: space-between;
		color: #666666;
		font-size: 28rpx;
		margin-top: 42rpx;
	}

	.order-bottom view {
		width: 140rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.order-img {
		width: 60rpx;
		height: 60rpx;
	}

	.order-bottom text {
		margin-top: 22rpx;
	}

	.setting {
		margin: 30rpx;
		height: 400rpx;
		border-radius: 12rpx;
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
	}

	.setting .settings {
		font-size: 32rpx !important;
	}

	.setting-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.setting-one {
		height: 99rpx;
		border-bottom: 1rpx solid #F5F5F5;
	}

	.setting-two {
		height: 99rpx;
		border-bottom: 1rpx solid #F5F5F5;
	}



	.league {
		font-size: 26rpx;
		color: #AAAAAA;
		margin-right: 15rpx;
	}

	.setting-three {
		height: 99rpx;
		border-bottom: 1rpx solid #F5F5F5;
	}

	.setting-rour {
		height: 100rpx;
	}

	.setting-left {
		margin-left: 33rpx;
	}

	.setting-left .titles {
		color: #1C1C1C;
		font-size: 28rpx;
		margin-left: 24rpx;
	}

	.setting-right .chevron-right {
		font-size: 32rpx !important;
		margin-right: 30rpx;
	}
</style>
